<template>
    <div>
<!--        {{searchMessage}}-->
        <div v-if="searchMessage && searchMessage.rows && searchMessage.rows.length">
            <div style="display: flex;padding: 10px 0px" v-for="item in searchMessage.rows">
                <img width="160" :src="item.coverURL" alt="">
                <div style="display: flex;flex-direction: column;width: 100%;margin-left: 20px;border-bottom:1px solid gray;">
                    <p style="font-weight: bold">{{item.name}}</p>
                    <p style="font-size: 12px;color:rgb(141, 130, 130);padding:25px 0 5px 0">所属科目：{{item.subject.name}}</p>
                    <p style="font-size: 12px;color:rgb(141, 130, 130);">视频时长：{{proxy.$filters.timeFormat(item.duration)}}</p>
                </div>
                <div style="display: flex;flex-direction: column;justify-content: flex-end;border-bottom: 1px solid gray;">
                    <el-button style="margin-bottom: 20px" @click="toVideo(item)">继续学习</el-button>
                </div>
            </div>
        </div>
        <el-empty v-else description="暂无课程" />
        <div v-if="searchMessage.pagination" style="margin-top:30px">
            <el-pagination
                    background
                    v-model:currentPage="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="searchMessage.pagination.count"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    import { watchEffect,ref,getCurrentInstance } from 'vue'
    import {complexSearch} from "@/api/api";
    import {useRouter} from "vue-router";

    export default {
        name: "course",
        props:{
            subject_id:{
                type:String
            },
            searchParam: {
                type:String,
                default:''
            }
        },
        setup(props){
            let router = useRouter();
            const { proxy } = getCurrentInstance()
            let pageSize = ref(5);
            let currentPage = ref(1);
            let searchMessage = ref([]);
            let getComplexSearch = () =>{
                complexSearch({type:'video',content:props.searchParam,courseID:localStorage.getItem('activeCourse'),page:currentPage.value,pageSize:pageSize.value}).then(res =>{
                    console.log('搜索课程内容',res)
                    searchMessage.value = res.data
                })
            }
            getComplexSearch();
            watchEffect(() =>{
                let activeCourse = props.subject_id;
                let searchParam = props.searchParam;
                console.log('activeCourse',activeCourse);
                console.log('searchParam',searchParam);
                getComplexSearch();
            })

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                pageSize.value = val;
                getComplexSearch();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                currentPage.value = val;
                getComplexSearch();
            }
            let toVideo = (item) =>{
                console.log(item)
                router.push({
                    name: 'VideoPlayer',
                    params: {
                        subject_id: localStorage.getItem('activeCourse'),
                        subject_name: localStorage.getItem('activeCourseName'),
                        id: item.id,
                        chapterID:item.subjectID
                    }
                })
            }
            return{
                toVideo,
                proxy,
                pageSize,
                currentPage,
                searchMessage,
                handleSizeChange,
                handleCurrentChange
            }
        }
    }
</script>

<style scoped>

</style>
